<template>
  <div ref="k" class="el-card is-hover-shadow flex-1">
    <div class="k-title el-card__header">按小时统计工具借还频率</div>
    <div ref="chartRef" style="width: 100%; height: 80%" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
import dayjs from "dayjs";
import { object } from "vue-types";

const { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();

const props = defineProps({
  data: { type: Array, default: () => [] }
});
// 图标数据额
const list = computed(() => {
  const list = [...props.data];
  list.sort((a: any, b: any) => a.time - b.time);
  return list;
});
const xData = computed(() => list.value.map((item: any) => item.time));
const yData1 = computed(() => list.value.map((item: any) => item.returnCount));
const yData2 = computed(() => list.value.map((item: any) => item.lendCount));
const { setOptions } = useECharts(chartRef, {
  theme,
  renderer: "svg"
});

const initData = () => {
  const h = parseFloat((14 / 1080) * window.innerHeight);

  setOptions({
    grid: {
      bottom: 20,
      left: 30,
      right: 20
    },
    color: ["#1E77FF", "#46C687"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      data: ["归还", "借出"],

      textStyle: {
        color: "#606266",
        fontSize: "0.875rem"
      },
      right: "5%",
      icon: "rect",
      itemWidth: h,
      itemHeight: h
    },
    xAxis: [
      {
        type: "category",
        data: xData.value
      }
    ],
    yAxis: {
      show: true,
      type: "value"
    },
    series: [
      {
        name: "借出",
        type: "bar",
        data: yData2.value,
        itemStyle: {
          color: "#46C687",
          borderRadius: [10, 10, 0, 0]
        }
      },
      {
        name: "归还",
        type: "bar",
        data: yData1.value,
        itemStyle: {
          color: "#1E77FF",
          borderRadius: [10, 10, 0, 0]
        }
      }
    ]
  });
};

defineExpose({ initData });
</script>
